<div class="stack-selector">
  <div layout="column" layout-aling="start center"
       layout-gt-md="row" layout-align-gt-md="start center"
       flex>

    <!-- Scope toggle -->
    <che-toggle-joined class="stack-selector-toggle"
                       ng-model="stackSelectorController.selectedScope"
                       ng-change="stackSelectorController.scopeChanged()"
                       md-theme="default"
                       flex-order="2" flex-order-gt-md="1">
      <che-toggle-joined-button che-title="All"
                                id="all-stacks-button"
                                che-value="stackSelectorController.scope.ALL"></che-toggle-joined-button>
      <che-toggle-joined-button che-title="Quick Start"
                                id="quick-start-button"
                                che-value="stackSelectorController.scope.QUICK_START"></che-toggle-joined-button>
      <che-toggle-joined-button che-title="Single Machine"
                                id="single-machine-button"
                                che-value="stackSelectorController.scope.SINGLE_MACHINE"></che-toggle-joined-button>
      <che-toggle-joined-button che-title="Multi Machine"
                                id="multi-machine-button"
                                che-value="stackSelectorController.scope.MULTI_MACHINE"></che-toggle-joined-button>
    </che-toggle-joined>

    <!-- Filters, Add stack and Search -->
    <div class="stack-selector-buttons-right"
         flex
         flex-offset="0" flex-offset-gt-md="5"
         flex-order="1" flex-order-gt-md="2"
         layout="row"
         layout-align="start center" layout-align-gt-md="end center">
      <toggle-button-popover button-title="Filters"
                             id="filter-stacks-button"
                             button-font-icon="fa fa-sliders"
                             che-popover-trigger-outside-click="true"
                             ng-class="{'stack-selector-active-tags-filter': stackSelectorController.selectedTags.length}">
        <che-stack-library-filter stack-tags="stackSelectorController.allStackTags"
                                  selected-tags="stackSelectorController.selectedTags"
                                  on-tags-changes="stackSelectorController.onTagsChanges(tags)">
        </che-stack-library-filter>
      </toggle-button-popover>
      <che-button-default che-button-title="Add Stack"
                          id="add-stack-button"
                          che-button-icon="material-design icon-ic_add_24px"
                          name="addStack"
                          ng-click="stackSelectorController.onAddStack()"></che-button-default>
      <search-input search-placeholder="Search"
                    id="search-stack-input"
                    search-on-change="stackSelectorController.searchChanged(search)"></search-input>
    </div>
  </div>

  <div class="stack-selector-list" ng-hide="stackSelectorController.stacksFiltered.length === 0">
    <div>
      <div>
        <!-- Stacks list header -->
        <che-list-header>
          <div flex="100"
               layout="row" layout-align="start stretch"
               class="che-list-item-row">
            <div flex layout="row"
                 layout-align="start center"
                 class="che-list-item-details">
              <che-list-header-column class="stack-selector-icon-column"
                                      che-column-title=""></che-list-header-column>
              <che-list-header-column flex="auto"
                                      che-sort-value="stackSelectorController.stackOrderBy"
                                      on-sort-change="stackSelectorController.buildFilteredList()"
                                      che-sort-item="name"
                                      che-column-title="Name"></che-list-header-column>
              <che-list-header-column flex="25"
                                      class="stack-ram-offset"
                                      che-column-title="RAM"></che-list-header-column>
            </div>
          </div>
        </che-list-header>
        <!-- Stacks list -->
        <che-list class="stack-selector-stack-list">
          <stack-selector-item ng-repeat="stack in stackSelectorController.stacksFiltered"
                               stack="stack"
                               stack-icon-link="stackSelectorController.stackIconLinks[stack.id]"
                               stack-machines="stackSelectorController.stackMachines[stack.id]"
                               stack-id-selected="stackSelectorController.selectedStackId"
                               stack-on-click="stackSelectorController.selectStack(stackId)"
                               is-pinned="stackSelectorController.isPinned(stack)"
                               data-stack-id="{{stack.id}}"></stack-selector-item>
        </che-list>
      </div>
    </div>
  </div>
  <div class="che-list-empty">
    <span ng-show="stackSelectorController.stacks.length > 0 && stackSelectorController.stacksFiltered.length === 0">No stacks found.</span>
    <span ng-show="stackSelectorController.stacks.length === 0">There are no stacks.</span>
  </div>

</div>
